CSS 3D flip card animation

The effect of this CSS flip card is that there will be a cool rotation when the mouse rolls over, showing the back card below, and it has a glowing effect. Share this code below:

HTML CODE:

<div class="flip">
    <div class="flip-box">
        <a href="http://infinetsoft.com/" target="_blank" class="flip-item flip-item-front">
            <img src="~/img/html.png" />
            <span class="flip-item-text">Front-end Development blog</span>
        </a>

        <a href="http://www.infinetsoft.com/Post/Shape-separator-CSS-examples/2772" target="_blank" class="flip-item flip-item-back">
            <div class="flip-item-bling"></div>
            <img src="~/img/manong.jpg" alt="">
            <span class="flip-item-text">Learn .net</span>
        </a>
    </div>
</div>

CSS CODE:

.flip{    
    transform: translate3d(0,0,0);
    margin: 40px;
}
 .flip-box {
    position: relative;
    width: 110px;
    height: 140px;
    overflow: hidden;
}
 .flip-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .5s ease-in-out;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    border: 1px solid #ddd;
    box-sizing: border-box;
}
     .flip-item img {
        width: 70px;
        height: 70px;
        border-radius: 100%;
        margin: 32px auto;
        display: block;
    }
 .flip-item-text {
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
}
 .flip-item-front {
    transform: rotateY(0deg);
    z-index: 2;
    background: #fff;
}
 .flip-item-back {
    transform: rotateY(180deg);
    z-index: 1;
    background: #009fff;
}
     .flip-item-back .flip-item-text {
        color: #fff;
    }
 .flip-box:hover .flip-item-front {
    z-index: 1;
    transform: rotateY(180deg);
}
 .flip-box:hover .flip-item-back {
    z-index: 2;
    transform: rotateY(0deg);
}
 .flip-item-bling {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    background: url(../img/animation.png) center no-repeat;
    z-index: -1;
}
 .flip-box:hover .flip-item-bling {
    transform: translate3d(0,0,0);
    animation: rotate infinite 10s linear;
}
 @keyframes rotate {
    0% {
        transform-origin: center;
        transform: rotate3d(0,0,1,0deg);
    }
     100% {
        transform-origin: center;
        transform: rotate3d(0,0,1,360deg);
    }
}

Definition and usage

The backface-visibility property defines whether the element is visible when it is not facing the screen.

This property is useful if the rotating element does not want to see its back side.

CSS3 transform-style Property

Make the converted child element retain its 3D transformation:

div{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari 和 Chrome */
-webkit-transform-style: preserve-3d;    /* Safari 和 Chrome */
}

The transform-style property specifies how the nested elements are rendered in 3D space.

CSS3 transform property

The transform property applies a 2D or 3D transformation to the element. This property allows us to rotate, scale, move, or tilt an element.

CSS3 perspective attribute

Set the view of where the element is viewed:

div{
perspective: 500;
-webkit-perspective: 500; / * Safari Japanese Chrome * / 
}

The perspective property defines the distance of the 3D element from the view, in pixels. This property allows you to change the view of the 3D element by viewing the 3D element.

When you define a perspective property for an element, its child elements get a perspective effect, not the element itself.

to sum up:

When using CSS 3D transform properties, turn on GPU hardware acceleration , transform:translate3d(0,0,0);and use the above code to improve performance.

To better understand this case, you need to be familiar with the use of these attributes. The corresponding prefix is ​​not added to the above CSS code. Please use the autoprefixer plugin to add it yourself .

The following table lists all the conversion properties: